<template>
	<div class="bodybox">
		<el-row id="header">
			<div class="container">
				<el-col :span="15" class="topleft">
					<div class="tabbox">
						<h3>首页</h3>
						<span>Homepage</span>
					</div>
					<div class="tabbox">
						<h3>景区详情</h3>
						<span>Landscape details</span>
					</div>
					<div class="tabbox" @click="router.replace({ path: '/hotel' })">
						<h3>预订酒店</h3>
						<span>Book a hotel</span>
					</div>
					<div class="tabbox">
						<h3>联系客服</h3>
						<span>Customer Service</span>
					</div>
					<div class="tabbox">
						<h3>关于我们</h3>
						<span>About Us</span>
					</div>
				</el-col>
				<el-col :span="7" :offset="2" class="topright">
					<div class="tabbox ">
						<h3>24小时客服热线</h3>
						<span>028-888-8888</span>
					</div>
					<div class="tabbox  logins">
						<span>注册</span>|
						<span>登录</span>
					</div>
				</el-col>
			</div>
		</el-row>
		<!-- 主题部分 -->
		<div id="banner">
			<div class="subject">
				<img src="img/hotelreservation.png">
				<div class="fatherbox">
					<div class="sonbox"><el-icon>
							<DArrowLeft />
						</el-icon><span>景区攻略及详情</span>
					</div>
					<div class="sonbox"><span>了解酒店详情</span><el-icon>
							<DArrowRight />
						</el-icon>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div id="footer">
			<div class="container">
				<div class="tixing">
					<span>
						三岔湖风景区
						<p>Sancha Lake Scenic Spot</p>
					</span>
					&emsp;+&emsp;
					<span>
						花岛度假酒店
						<p>Huadao Resort</p>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const router = useRouter();

</script>
<style lang="scss" scoped>
.bodybox {
	background: url(./img/jiudian2.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
}

.container {
	margin: 0 auto;
	min-width: 960px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	display: flex;
}

/* 头部导航 */
#header {
	min-width: 900px;
	height: 70px;
	background-color: rgba(240, 119, 21, 0.6);
	overflow: hidden;

	/* width: 100%; */


	.topleft {
		display: flex;

		.tabbox {
			cursor: pointer;
			text-align: center;
			color: #fff;
			margin: 5px 10px;

			h3 {
				margin: 0;
				line-height: 30px;
				font-size: 18px;
			}

			span {
				font-size: 14px;
			}
		}

		:hover {
			color: #eee;
			margin-top: 6px;
		}
	}

	.topright {
		display: flex;

		.tabbox {
			cursor: pointer;
			text-align: center;
			color: #fff;
			margin: 5px 10px;

			h3 {
				margin: 0;
				line-height: 30px;
				font-size: 18px;
			}

			span {
				font-size: 14px;
			}
		}

		.logins {
			line-height: 70px;
			display: flex;

			span {
				display: block;
				width: 50px;
				font-size: 17px;
			}

			:hover {
				margin-top: 1px;
			}
		}
	}
}

#banner .subject {
	position: absolute;
	top: 50%;
	margin: -150px -350px 0 0;
	right: 50%;
	height: 300px;
	width: 700px;
	background-color: rgba(240, 119, 21, 0.4);
	text-align: center;
}

#banner {

	.subject {
		img {
			width: 700px;
			margin: 20px 0 0 15px;
		}
	}

	.fatherbox {
		display: flex;
		justify-content: space-around;

		.sonbox {
			cursor: pointer;
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			width: 180px;
			color: #FFFFFF;
			border: 2px solid #ffffff;
			transition: .2s;

			span {
				background-color: rgba(0, 0, 0, 0);
			}
		}

		:hover {
			background-color: #FFFFFF;
			color: #ff9e01;
		}
	}
}

/* 梯形部分 */
#footer {
	.tixing {
		position: absolute;
		bottom: 0;
		width: 800px;
		height: 80px;
		margin-left: 200px;
		background-color: rgba(240, 119, 21, 0.4);
		/* position: relative; */
		text-align: center;
		color: #FFFFFF;
		font-size: 70px;
		line-height: 50px;
		border-bottom: 1px solid rgba(0, 0, 0, 0);
	}

	.tixing span {
		display: inline-block;
		font-size: 30px;
	}

	.tixing p {
		font-size: 20px;
		margin: 0;
		line-height: 10px;
	}

	.tixing::before {
		content: '';
		height: 0px;
		width: 0px;
		position: absolute;
		left: -50px;
		top: -50px;
		border-top: 50px solid rgba(0, 0, 0, 0);
		border-left: 50px solid rgba(0, 0, 0, 0);
		border-right: 0px solid rgba(0, 0, 0, 0);
		border-bottom: 80px solid rgba(240, 119, 21, 0.4);
	}

	.tixing::after {
		content: '';
		height: 0px;
		width: 0px;
		position: absolute;
		right: -50px;
		top: -50px;
		border-top: 50px solid rgba(0, 0, 0, 0);
		border-left: 0px solid rgba(0, 0, 0, 0);
		border-right: 50px solid rgba(0, 0, 0, 0);
		border-bottom: 80px solid rgba(240, 119, 21, 0.4);
	}
}
</style>
